<template>
  <div id="app">
    <div class="content" >
      <headerx @top_left='top_left'></headerx>
      <user :left="left" @other='other'></user>
      <index></index>
      <!--<ul class="content_ul">-->
        <!--<li @click="bottomx">11111</li>-->
      <!--</ul>-->
      <song_form @bottom='bottomx'></song_form>
      <song_list @back='back' :bottom='bottom'></song_list>
    </div>
  </div>
</template>

<script>
  import Headerx from './components/header/header.vue'
  import User from './components/user/user.vue'
  import Song_list from './components/song_list/song_list.vue'
  import Index from './components/index.vue'
  import Song_form from './components/song_form.vue'

export default {
  name: 'app',
  data () {
    return {
      left:{left:'-100%'},
      bottom:{bottom:'-100%',right:0, transition:'all .2s',opacity:'0',visbility:'hidden',item:'','z-index':-999}
    }
  },
  components:{
    Headerx,
    User,
    Song_list,
    Index,
    Song_form,
  },
  methods:{
    top_left:function(){
      var scroll=document.body.scrollTop
      this.left.top=scroll+'px'
      this.left.left='-50%'
      document.getElementsByClassName("zz")[0].style.top=scroll+'px'
    },
    bottomx:function(item){
      var scroll=document.body.scrollTop
      this.bottom.zIndex=999
        this.bottom.opacity=1
      this.bottom.visbility='visible'
      this.bottom.transition='all .2s'
      this.bottom.bottom=-scroll+'px'
      this.bottom.item=item
      document.body.style.overflowY='hidden'
//    },100)
    },
    back:function(){
      this.bottom.right='-100%'
      setTimeout(()=>{
        this.bottom.right=0
        this.bottom.bottom='-100%'
      this.bottom.opacity='0'
      this.bottom.visbility='hidden'
      this.bottom.transition='none'
      this.bottom.zIndex=-999
      document.body.style.overflowY='auto'
      },200)
    },
    other:function(e){
      var target= e.target.className
      if(target!='left'&&target!='top_left'){
        this.left.left='-100%'
      }
    },
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
*{
  margin: 0;
  padding: 0;
}
h1, h2 {
  font-weight: normal;
}
body {
height: 100%;

}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.content{
  /*position: absolute;*/
  width: 100%;
/*height: 100%;*/
  /*background-color: yellow;*/
}

</style>
